$shadow-c: rgba(114, 114, 114, 0.15);
$border-color1:#e2e2e2;
$border-color1:#e2e2e2;
$text_color1:#45414b;
$lite_posts:.17rem;
$date_color:rgb(138,138,138);
$primaryColor:#f9ab00;

.bgBox1{
    width: 7.7rem;
    height: 4.05rem;
}
.bgBox2{
    width: 1.38rem;
    height: .82rem;
}
.bgBox3{
    width: 3.67rem;
    height: 2.18rem;
}
.bgBox4{
       width: .92rem;
       height: .7rem;
}
.bgBox5{
    width: 3.67rem;
    height: 2.45rem;
}
.bgBox6{
    width: 2.55rem;
    height: 1.92rem;
}
.bgBox7{
    width: 2.92rem;
    height: 1.95rem;
}
.wrap {
    width: 12rem;
    margin: 0 auto;
}
body{
    padding-top: .6rem;
    color: rgba(0, 0, 0, .85);
    font: .14rem Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
}
a{
    color: #333;
    &:hover{
        color: $primaryColor;
    }
}
.searchBox{
    input{
        height: .38rem;
        line-height: 1.3;
        line-height: .38rem \9;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        color: rgba(0, 0, 0, .85);
        border-radius: 2px;
        padding-left: .1rem;
        border-color: #ccc;
        outline: none;
        &:focus{
            border-color: #ccc;
        }
    }
}
.header {
    position: fixed;
    top: 0;
    transition: all .3s;
    min-height: .6rem;
    width: 100%;
    display: flex;
    background-color: #fff;
    z-index: 9999;
    justify-content: space-between;
    box-shadow: 0 3px 4px 0 $shadow-c;

    .main-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .nav {
            display: flex;

            .logo-link {
                margin-right: .4rem;

                img {
                    padding: 10px 0;
                    max-height: 60px;
                    object-fit: contain;
                }
            }

            .nav__list {
                display: flex;
                .menu-item {
                    height: 100%;
                    transition: 0.3s ease-in;
                    transition-property: opacity, background;

                    .nav__link {
                        display: inline-block;
                        height: 100%;
                        line-height:  .6rem;
                        text-decoration: none;
                        padding: 0 .17rem;
                        font-size: 15px;
                        font-weight: 600;
                        letter-spacing: inherit;
                    }
                }
            }
        }

        .searchBox {
            position: relative;
            width: 1.44rem;
            height: .38rem;
            display: flex;
            align-items: center;

            .layui-input {
                position: relative;
                right: 0;
                width: 1.44rem;
                height: .3rem;

                &:focus {
                    margin-right: .56rem;
                }
            }

            i {
                position: absolute;
                right: .04rem;
                font-size: 20px;
                color: #ccc;
            }
        }
    }

}

.copyRight {
    background-color: $border-color1;
    height: 2.88rem;
    margin-top: .3rem;
    padding: .5rem 0;
    text-align: center;
    color: #999;

    .links {
        display: flex;
        justify-content: center;

        li {
            margin-right: .2rem;

            a {
                font-size: 14px;
                font-weight: 700;
            }
        }
    }
}

.breadCrumb {
    margin: 0 auto;
    padding: .19rem  0 .19rem 0;
    .type-name {
      display: inline-block;
    }
    .type-name a {
      font: 700 14px/.24rem PingFangSC-Regular, PingFang SC;
      color: #222222;
    }
    .type-name + .type-name:before {
      content: ">\00a0";
    }
    .type-name:last-child a {
      font: 700 14px/.24rem PingFangSC-Regular, PingFang SC;
      color: #07cd5a;//控制最后一个li的颜色和前面不同
    }
    .type-name:hover {  //鼠标滑过效果
      a {
        font: 700 14px/.24rem PingFangSC-Regular, PingFang SC;
        color: #07cd5a;
      }
    }
  }

  .aside{
    position: sticky;
    top: .2rem;
    height: min-content;
    width: 3.9rem;
    padding: 0 .18rem 0 .26rem;
    .relatedPosts{
        .relatedHeading{
            display: inline-block;
            margin-bottom: .01rem;
            padding: .09rem .14rem;
            border-radius: 2px;
            color: #fff;
            background: #D82A50;
            font-size: 14px;
            font-weight: 600;
            line-height: 1;
            text-transform: uppercase;
            letter-spacing: 2.5px;
        }
        .subPosts{
            margin-top: .3rem;
        }
    }
  
}
// 具体小文章
.subPosts{
    display: flex;
    width: 3.67rem;
    height: .7rem;
    margin-bottom: .2rem;
    .media{
        margin-right: .2rem;
      
        
    }
    .postsText{
        padding: .04rem 0;
        .postsTitle{
            margin-bottom: .1rem;
        }
        .postsDate{
            font-size: 12px;
            color: $date_color;
        }
    }
}
// 分类的标题
.categoryTitle{
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: .3rem 0;
    padding-bottom: .13rem;
    border-bottom: 1px solid $border-color1;
    &::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: .6rem;
        height: .03rem;
        background-color: $text_color1;
    }
    .heading{
        color: $text_color1;
        font-weight: 700;
        font-size: 16px;
    }
    .view-more{
        font-size: 14px;
        color: #999;
        transition: all .3s;
        &:hover{
            color: #393440;
        }
    }
}

// 所有文章图片公共样式
.bgImg{
    background-position: center center;
    transition: all 1s;
    background-size: 100%;
    &:hover{
        opacity: .75;
    }
}

.content_main {
    display: flex;
    justify-content: space-between;
    color: $text_color1;
    padding-bottom: .5rem;
    .articleList {
        width: 8.06rem;
        &:last-child{
            .posts{
                border-bottom: none;
            }
        }
        h1{
            font-size: 19px;
            font-weight: 600;
            border-left: .03rem solid $text_color1;
            padding-left: .14rem;
            line-height: 2;
            letter-spacing: 0.01em;
        }
        .posts {
            display: flex;
            justify-content: space-between;
            padding: .3rem 0;
            border-bottom: .01rem solid $border-color1;
         
            .media {
                margin-right: .25rem;
                position: relative;
                // 分类按钮
                .typeBtn {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    font-size: 10px;

                    a {
                        display: inline-block;
                        padding: .06rem;
                        color: $border-color1;
                        background-color: $text_color1;

                        &:hover {
                            background-color: #393440;
                        }
                    }

                }
            }

            .contentText {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                padding: .05rem 0;

                h2 {
                    font-size: 18px;
                    margin-bottom: .09rem;
                }

                .publicTime {
                    font-size: 10px;
                    color: $date_color;
                }

                .desc {
                    margin-top: .16rem;
                    font-size: 17px;
                    color: rgb(80, 80, 80);
                }
            }
        }

    }

    .aside {
        width: 3.8rem;
        padding:0 0 0 .26rem;
        .categoryTitle{
            margin-top: 0;
        }
        .subPosts{
            .media{
                .bgImg{
                    background-size: cover;
                }
            }
        }
    }
}